import 'package:flutter/material.dart';
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';

import 'package:flutter_cookbook/ui/pages/CookbookListPage.dart';

var select = 0;

class CookbookMenuWidget extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return MenuState();
  }
  
}

class MenuState extends State {
  
  List _list = [];
  
  List _subList = [];
  
  @override
  Widget build(BuildContext context) {
  
    Widget divider = Divider(color: Colors.grey, height: .5,);
    
    return Row(
      children: [
        Expanded(child: ListView.separated(
          physics: BouncingScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {
            //print(_list[index]["name"]);
            
            var color = Colors.transparent;
            
            if (index == select) {
              color = Colors.orange;
            }
            
            return GestureDetector(
              child: Container(
                child: Center(
                  child: Text(
                    _list[index]["name"],
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                color: color,
                padding: EdgeInsets.only(top: 16, bottom: 16),
              ),
              onTap: () {
                if (index != select) {
                  _subList.clear();
  
                  setState(() {
                    select = index;
    
                    if (index == select) {
                      color = Colors.orange;
                    } else {
                      color = Colors.transparent;
                    }
    
                    _subList.addAll(_list[select]["list"]);
                  });
                }
              },
            );
          },
          itemCount: _list.length,
          separatorBuilder: (BuildContext context, int index) {
            return divider;
          },
        
        ),
          flex: 1,
        ),
        Expanded(
          child: GridView.builder(
            physics: BouncingScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 1.5,
            ),
            itemBuilder: (BuildContext context, int index) {
              //print(_subList[index]);
              
              return GestureDetector(
                child: Container(
                  color: Colors.transparent,
                  child: Center(
                    child: Text(_subList[index]["name"]),
                  ),
                ),
                onTap: () {
                  var name = _subList[index]["name"];
                  var classid = _subList[index]["classid"];

                  //print("name = $name");
                  //print("classid = $classid");

                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) {
                        return CookbookListPage(name, classid);
                  }));
                },
              );
            },
            itemCount: _subList.length,
          ),
          flex: 3,
        ),
      ],
    );
  }

  @override
  void initState() {
    super.initState();
    
    getData();
  }
  
  void getData() async {
    String json = await loadMenuFromAsset();
    setState(() {
      _list.addAll(jsonDecode(json));
      _subList.addAll(_list[select]["list"]);
    });
  }
 
  Future<String> loadMenuFromAsset() async {
    return await rootBundle.loadString('json/menu.json');
  }
  
}